<template>
  <div>
    <div class="cc-form">
      <el-form :inline="true">
        <el-form-item label="测试名称">
          <el-input v-model="searchTest.testName"></el-input>
        </el-form-item>
        <el-form-item label="测试内容">
          <el-input v-model="searchTest.testContent"></el-input>
        </el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form>
    </div>
    <div>
      <el-button type="primary" @click="openInsertDialog">新增</el-button>
    </div>
    <div>
      <el-table :data="dataList">
        <el-table-column :label="'测试对象name'" :prop="'testName'"></el-table-column>
        <el-table-column :label="'测试对象content'" :prop="'testContent'"></el-table-column>
      </el-table>
    </div>
  </div>

  <el-dialog v-model="showDialog" :append-to-body="true" :title="'新增测试对象'">
    <el-form :inline="true">
      <el-form-item label="测试名称">
        <el-input v-model="insertData.testName"></el-input>
      </el-form-item>
      <el-form-item label="测试内容">
        <el-input v-model="insertData.testContent"></el-input>
      </el-form-item>
      <el-button type="primary" :loading="insertLoading.status" @click="insertTest">新增</el-button>
    </el-form>
  </el-dialog>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, ref} from "vue";
import {apiMethod} from "@/apis/apis";
import {Page} from "@/common-class/common-config/ApiClass";
import {Wind3Test} from "@/common-class/model/Wind3Test";
import {Loading} from "@/common-class/model/Wind3Loading";

export default defineComponent({
  name: "TestIndex",
  setup() {
    let showDialog = ref<boolean>(false)
    let page: Page = reactive<Page>({ pageSize: 10, pageIndex: 1 })
    let dataList: Wind3Test[] = reactive<Wind3Test[]>([])
    let searchTest: Wind3Test = reactive<Wind3Test>({ testName: '', testContent: ''})
    let insertData: Wind3Test = reactive<Wind3Test>({ testName: '', testContent: ''})
    let insertLoading: Loading = reactive<Loading>( { status: false })
    let getList = async () => {
      dataList.splice(0, dataList.length)
      let data = await apiMethod.getTestList({...page, ...searchTest});
      dataList.push(...data.result)
    }
    let insertTest = () => {
      insertLoading.status = true
      let data = apiMethod.insertTest(insertData)
      insertLoading.status = false
    }
    let openInsertDialog = () => { showDialog.value = true }
    let closeInsertDialog = () => { showDialog.value = false }
    let mounted = onMounted(() => {
      getList()
    })
    return { page, showDialog, insertData, dataList, searchTest, mounted, insertLoading,
      getList, openInsertDialog, closeInsertDialog, insertTest }
  }
})
</script>

<style scoped>

</style>
